<template>
  <h2>搜索</h2>
  <el-form label-position="top">
    <el-form-item label="时间范围">
      <el-date-picker
        v-model="formData.date"
        type="daterange"
        range-separator="-"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      />
    </el-form-item>
    <el-form-item label="按关键词搜索">
      <el-input placeholder="请输入关键字" v-model="formData.keyword" />
    </el-form-item>
    <el-form-item label="类别">
      <el-select v-model="formData.category" placeholder="Select">
        <el-option
          v-for="item in [1, 2, 3, 6, 5]"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
    </el-form-item>
    <el-button type="primary">搜索</el-button>
  </el-form>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

const formData = reactive({
  date: '',
  keyword: '',
  category: 0,
})
</script>

<style scoped lang="scss">
h2 {
  font-size: 20px;
  margin-bottom: 30px;
}
:deep(.el-button--primary) {
  background-color: #234fea;
  border-color: #234fea;
}
</style>
